<template>
  <view>
    <view class="cart_list">
      <view v-for="(item) in cartList" :key="item.goods_id" class="cart_item">
        <view class="cart_item_left">
          <radio @tap="changeSelectHandle(item.goods_id)" color="#EB4450" class="cart_item_selected"
          :checked="item.goods_selected" />
        </view>
        <view class="cart_item_right">
        <GoodsItem :item="item" />
        <view class="cart_count">
          <view @tap="changeCount(item.goods_id,-1)" class="iconfont icon-jianshao"></view>
          <view class="cart_count_text">{{item.goods_count}}</view>
          <view @tap="changeCount(item.goods_id,+1)" class="iconfont icon-zengjia"></view>
        </view>
        </view>
      </view>
    </view>
    <view v-if="cartList.length" class="bottom">
      <radio color="#EB4450" class="bottom_select"/>
      <text class="select_all">全选</text>
      <text class="total">合计:</text>
      <view class="price">{{totalPrice}}</view>
      <button class="button_item">去结算({{account}})</button>
    </view>
    <!-- 空购物车 -->
    <view v-if="cartList.length === 0" class="cart_empty">
      <image class="empty_img" src="/static/cart_empty.gif" mode="widthFix" />
      <navigator url="/pages/index/main" open-type="switchTab" class="empty_button" hover-class="none">去首页看看</navigator>
    </view>
  </view>
</template>

<script>
import GoodsItem from "@/components/GoodsItem/index";
export default {
  components: {
    GoodsItem,
  },
  data() {
    return {
      // 刷新的时候，数据还没加载出来，cartList为空会显示购物车为0的状态，所以避免的这情况要在数组中加一个{}
      cartList: [{}],
    };
  },
  computed:{
    totalPrice(){
      let totalPrice = 0;
      this.cartList.forEach((item) => {
        if(item.goods_selected){
          totalPrice += item.goods_price * item.goods_count;
        }
      })
      return totalPrice;
    },
    
    account(){
      // 如果是淘宝的话，就把勾中的都加进去
      // let account = 0;
      // this.cartList.forEach((item) => {
      //   if(item.goods_selected){
      //     account += 1;
      //   }
      // })
      // return account;
      // 京东的话，把每一个商品里面的数量都算进去
      let account = 0;
      this.cartList.forEach((item) => {
        if(item.goods_selected){
          account += item.goods_count;
        }
      })
      return account;
    }
  },
  // 监测cartList因数量增加而变化的情况，然后存入本地存储中
  watch:{
    cartList:{
      // 因为普通的检测不能检测到，所以要深度检测
      deep:true,
      handler:(val) => {
        uni.setStorageSync('cartList', val)
      }
    }
  },
  
  // 每次一进入购物车的时候都会重新获取数据，而Onload只能获取一次，所以只能用onshow
  onShow() {
    this.cartList = uni.getStorageSync("cartList") || [];
  },
  methods:{
    // 改变选中状态
    changeSelectHandle(goods_id){
      // 根据goods_id 找到对应的索引以便以后用户取消当前商品时索引的变化导致的错误
      const index = this.cartList.findIndex(
        (item) => item.goods_id === goods_id
      )
      this.cartList[index].goods_selected = !this.cartList[index].goods_selected;
    },
    changeCount(goods_id,number){
      const index = this.cartList.findIndex(
        (item) => item.goods_id === goods_id
      )
      this.cartList[index].goods_count += number;
    }
  }
};
</script>

<style lang="less" >
.cart_list {
  .cart_item {
    display: flex;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #ddd;
    &:last-child{
      border-bottom: none;
    }
    .cart_item_left {
      width: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .cart_item_right {
      flex: 1;
      position: relative;
      .cart_count {
        display: flex;
        position: absolute;
        bottom: 30rpx;
        right: 36rpx;
  .iconfont {
    font-size: 40rpx;
    color: #8A8A8A;
  }

  .cart_count_text {
    text-align: center;
    min-width: 76rpx;
    font-size: 30rpx;
    padding: 0 6rpx;
  }

  .icon-zengjia {
    font-size: 36rpx;
  }
}
    }
  }
}
.bottom {
  display: flex;
  height: 84rpx;
  padding: 0 20rpx;
  position: fixed;
  align-items: center;
  // 同时设置左右，可以拉伸出宽度
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
    .bottom_select{
      width: 56rpx;
    }
    .select_all {
      font-size: 22rpx;
      color: #8A8A8A;
      margin-left: 24rpx;
    }

    .total {
      font-size: 26rpx;
      margin-left: 36rpx;
    }

    .price {
      font-size: 36rpx;
      flex: 1;
      margin-left: 10rpx;
    }

    .button_item {
      min-width: 160rpx;
      height: 52rpx;
      border-radius: 26rpx;
      background-color: var(--mainColor);
      font-size: 22rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
}
.cart_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  .empty_img {
    width: 460rpx;
  }

  .empty_button {
    margin-top: 20rpx;
    width: 300rpx;
    height: 80rpx;
    color: #fff;
    background-color: var(--mainColor);
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
  }
}
</style>